<template>
  	<div>
  		<div class="di1" v-for="value in pinqiang" v-show="show1">
  			<div class="ji_fenk1">
			  	<ul>
			  		<li class="tu_tu"></li>
			  		<li class="pin_qing">拼抢ing</li>
			  		<li class="pq_z">{{pqstatus}}</li>
			  		<div class="clearfix"></div>
			  	</ul>
			  	
	  		</div>
		  	<div class="tu1_box" @click="xiangqing(value.order_id)">
		  		<div class="tu1_tu1">
			  		<div class="tupians1">
			  			<img :src=url+value.image />
			  		</div>
			  		<div class="wenzixin">
				  		<p style="font-size: 13px;color: #4a4a4a;line-height: 16px;">{{value.goods_name}}</p>
				  		<p style="font-size: 12px;color: #9b9b9b;line-height: 12px;margin-top: 5px;">{{value.attr_name}}</p>
				  		<p style="line-height: 13px;font-size: 14px;color: #ff2e22;margin-top: 9px;float: left;">¥{{value.price}}/次
				  		</p>
				  		<p class="j_sj">距结束 {{value.day}}天{{value.hours}}：{{value.minutes}}：{{value.miao}}</p>
			  		</div>
			  		<div class="clearfix"></div>
		  		</div>
		  	</div>
			 <div style="width: 100%;padding: 10px 6px;border-top: 1px solid #EEEEEE;height: 44px;">
				  	<div class="disan">第3名(99位好友)</div>
				  	<router-link :to="{path:'/pqjs',query:{start_time:value.start_time,end_time:value.end_time,order_id:value.order_id}}">
				  		<input type="button" value="邀请好友助力" class="yaoqin_haoyou" />
				  	</router-link>
				  	<div class="clearfix"></div>
			</div>
			<div style="height: 8px;background: #F5F5F5;width: 100%;"></div>
	  	</div>
	  	<div v-show="show" style="width: 100%;margin-top: 80px;"><p style="font-size: 14px;line-height: 30px;text-align: center;">暂无记录</p></div>
	  	<loading :show="show2" :text="text1"></loading>
  	</div>
</template>

<script>
//import { Group, Cell } from 'vux'
import axios from 'axios'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
//  Group,
//  Cell,
	mapState,
	mapActions,
  },
  data () {
    return {
      pinqiang:[],
      pqstatus:'',
      show:false,
      show1:true,
      show2:false,
	  text1:'loading...',
	  day:'',
  	  hours:'',
  	  minutes:'',
  	  miao:'',
    }
  },
  methods:{
  	dateDif(begin,end){
	    var date = begin - end; 
	    var days    = date / 1000 / 60 / 60 / 24;
	    var daysRound   = Math.floor(days);
	    var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
	    var hoursRound   = Math.floor(hours);
	    var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
	    var minutesRound  = Math.floor(minutes);
	    var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
	    var secondsRound  = Math.floor(seconds);
	    var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
	    

	    return daysRound;
	    // setInterval(()=>{this.dajishi()},1000)
    },
    dateDif1(begin,end){
	    var date = begin - end; 
	    var days    = date / 1000 / 60 / 60 / 24;
	    var daysRound   = Math.floor(days);
	    var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
	    var hoursRound   = Math.floor(hours);
	    var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
	    var minutesRound  = Math.floor(minutes);
	    var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
	    var secondsRound  = Math.floor(seconds);
	    var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
	    

	    return hoursRound;
	    // setInterval(()=>{this.dajishi()},1000)
    },
    dateDif2(begin,end){
	    var date = begin - end; 
	    var days    = date / 1000 / 60 / 60 / 24;
	    var daysRound   = Math.floor(days);
	    var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
	    var hoursRound   = Math.floor(hours);
	    var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
	    var minutesRound  = Math.floor(minutes);
	    var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
	    var secondsRound  = Math.floor(seconds);
	    var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
	    

	    return minutesRound;
	    // setInterval(()=>{this.dajishi()},1000)
    },
    dateDif3(begin,end){
	    var date = begin - end; 
	    var days    = date / 1000 / 60 / 60 / 24;
	    var daysRound   = Math.floor(days);
	    var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
	    var hoursRound   = Math.floor(hours);
	    var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
	    var minutesRound  = Math.floor(minutes);
	    var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
	    var secondsRound  = Math.floor(seconds);
	    var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
	    

	    return secondsRound;
    },
    dajishi(){
    	for(var i=0;i<this.pinqiang.length;i++){
	    	if(this.pinqiang[i].day == 0 && this.pinqiang[i].hours == 0 && this.pinqiang[i].minutes == 0 && this.pinqiang[i].miao == 0){
	    		this.pinqiang[i].day = 0;
	    		this.pinqiang[i].hours = 0;
	    		this.pinqiang[i].minutes = 0;
	    		this.pinqiang[i].miao = 0;
	    	}else{
		    	if(this.pinqiang[i].miao > 0){
		    		this.pinqiang[i].miao--;
		    	}else{
		    		this.pinqiang[i].miao = 59;
		    		if(this.pinqiang[i].minutes > 0){
		    			this.pinqiang[i].minutes--;
		    		}else{
		    			this.pinqiang[i].minutes = 59;
		    			if(this.pinqiang[i].hours > 0){
		    				this.pinqiang[i].hours--;
		    			}else{
		    				this.pinqiang[i].hours = 23;
		    				if(this.pinqiang[i].day >0){
		    					this.pinqiang[i].day--;
		    				}
		    			}
		    		}
		    		
		    	}
		    }
		}
    },
    xiangqing(order_id){
    	this.$router.push({path:'pinqiangqingkuang',query:{order_id:order_id}})
    }
  },
  created(){
  	this.show2 = true;
  	axios.post(this.url + '/home/RobOrder/myOrder',{openid:this.token}).then((res)=>{
  		console.log(res);
  		this.show2 = false;
  		if(res.data.length == 0){
  			this.show = true;
  			this.show1 = false;
  		}else{
  			for(var i=0;i<res.data.length;i++){
	  			res.data[i].day = this.dateDif(res.data[i].start_time*1000,res.data[i].end_time*1000);
	  			res.data[i].hours = this.dateDif1(res.data[i].start_time*1000,res.data[i].end_time*1000);
	  			res.data[i].minutes = this.dateDif2(res.data[i].start_time*1000,res.data[i].end_time*1000);
	  			res.data[i].miao = this.dateDif3(res.data[i].start_time*1000,res.data[i].end_time*1000);
	  		}
  			this.pinqiang = res.data;
  			if(this.pinqiang.status == 0){
  				this.pqstatus = '拼抢中';
  			}else if(this.pinqiang.status == 1){
  				this.pqstatus = '拼抢成功';
  			}else{
  				this.pqstatus = '拼抢失败';
  			}
  			for(var i=0;i<this.pinqiang.length;i++){
//				this.dateDif(this.pinqiang[i].start_time*1000,this.pinqiang[i].end_time*1000);
  			}
//			this.dateDif(this.pinqiang.start_time*1000,this.pinqiang.end_time*1000);
			setInterval(()=>{this.dajishi()},1000)
  		}
	  		
  		
  	})
  },
  computed:{
      ...mapState({
          token: state => state.Token.userToken()//获取用户Token
      }),
  }
}
</script>

<style>
	body{
		background: #fff;
	}
.content1{
		width: 100%;
		border: 1px /*solid*/ red;
		color: white;
		/*border: 1px solid red;*/
	}
	
.zl{
		width: 100%;
		text-align: center;
		line-height: 20px;
		font-size: 16px;
		margin-top: 15px;
		color: #333;
	}
.gzjf{width: 100%;
		text-align: center;
		line-height: 17px;
		font-size: 13px;
		color: #7f7f7f;
		margin-top: 10px;
		padding: 0 15px;
		
	}
.lan{
		width: 100%;
		border: 1px /*solid*/ green;
		margin-top: 20px;
	}
.yq{margin: 0 auto;
		width: 100%;
		height: 44px;
		background-color: #00c850;
		color: #FFFFFF;
		line-height: 22px;
	}
.lan1{
		float: left;
		width: 100%;
		border: 1px /*solid */green;
		
		line-height: 13px;
		font-size: 13px;
		color: #333;
		margin-left: 301px;
		margin-bottom: 20px;
	}
.yq1{
		padding: 0 20px;
		width: 100%;
		height: 44px;
		background-color: white;
		color: #00C850;
		line-height: 22px;
	}
	
*{list-style: none;margin: 0;padding: 0;}
.pq li{color: #333;
	       float: left;
	       line-height: 20px;
	       font-size: 14px;
	       margin-top: 10PX;
}
.pq .tu{height: 24px;
		width: 24px;
		border-radius: 50%;
		border: 1px /*solid*/ black;
		margin: 0 3px;
		margin-top: 8PX;
		}

.pq .pqz{float: right;
		color: #7f7f7f;
		line-height: 14px;
	    font-size: 13px;
	    /*margin-top: 13PX;*/
		}
.er_er{float: right;
		color: #333;
		line-height: 18px;
	    font-size: 16px;
	    margin-top: 6px;
}
.j_f{float: right;
		color: #333;
		line-height: 17px;
	    font-size: 12px;
	    margin-top: 6px;
		
}	
.you_fei{float: right;
		color: #333;
		line-height: 17px;
	    font-size: 12px;
		margin-top: 6px;
}	
.tu1_box .wenzixin{
				margin-left: 5px;
				float: left;
				box-sizing: border-box;
				border: /*solid*/ yellow 1px;
				display: inline-block;
			}
.di1{margin: 0;
			box-sizing: border-box;
			border: /*solid*/ 1PX slateblue;
			
			}
.hyzl{float: right;
		background: #9b9b9b;
		height: 12px;
		width: 12px;
		margin-top: 5px;
		}
.ds_pqgz{margin-top: 6px;
			font-size: 12px;
			color: #333;
			float: right;
			line-height: 17px;
			}

.clearfix{
	clear: both;
	}

.tu1_box{
	border-bottom: 1px solid red;
	border: 1px /*solid*/ black;
	padding: 12px 0px;
}
.tupians1{
	height: 60px;
	width: 60px;
	float: left;
}		
.tupians1 img{
	height: 60px;
	width: 60px;
}	
.ji_fenk1{
	border-bottom: 1px solid #EEEEEE;
	padding: 10px 15px;
}
.pin_qing{
	float: left;
	line-height: 20px;
	font-size: 14px;
	margin-left: 5px;
	margin-top: 10px;
	color: #333333;
}
.pq_z{
	float: right;
	line-height: 18px;
	font-size: 13px;
	color: #FF2E22;
	margin-top: 10px;
	margin-right: -7px;
	
	
	
	
}
.ji_fenk1 .tu_tu{
	width: 24px;
	height: 24px;
	background: url(../../static/jifenshangcheng_select.png)no-repeat center;
	border: 1px /*solid*/ red;
	float: left;
	background-size: 24px;
	margin-top: 8px;
	margin-left: -12px;
}
.tu1_tu1{
	border: 1px /*solid*/ red;
	margin-top: 0px;
	padding: 0 10px;
}
.j_sj{
	
	line-height: 13px;
	font-size: 13px;
	color: #F8AF2C ;
	float: right;
	margin-top: 10px;
	margin-left:5px;
}
.disan{
	float: left;
	line-height: 18px;
	font-size: 14px;
	margin-top: 3px;
}
.yaoqin_haoyou{
	float: right;
	line-height: 18px;
	font-size: 13px;
	margin-top: -2px;
	color: white;
	background: #00C850;
	outline: none;
	height: 28px;
	display: block;
	width: 109px;
	border: 1px solid #00C850;
	border-radius: 4px;
}
.yaoqin_haoyou1{
	float: right;
	line-height: 18px;
	font-size: 13px;
	margin-top: -2px;
	color: white;
	background: white;
	color: #00C850;
	outline: none;
	
	height: 28px;
	display: block;
	width: 83px;
	border: 1px solid #00C850;
}
</style>
